import React from 'react';
import * as echarts from 'echarts';
import { CustomChartOptions, ChartTitleOption, ChartLegendOption } from '../interface';
import _ from 'lodash';
import useChartCommon from './useChartCommon';

const defaultOption = {
  // color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
  color: [
    '#0454B3',
    '#00C5C4',
    '#FFAE00',
    '#B773F4',
    '#ADD842',
    '#4476B2',
    '#E8C104',
    '#76B5FF',
    '#DC6EB1',
    '#FF9326',
    '#7F94EF',
    '#97B0BA',
    '#C39BE7',
    '#67E3E2',
    '#44A0E4',
    '#E39E7F',
    '#3E52B2',
    '#EA7181',
    '#80B594',
    '#D14E9A',
  ],
};
export default function useChartOption(option: CustomChartOptions | undefined): {
  title: ChartTitleOption;
  legend: ChartLegendOption;
  option: echarts.EChartsCoreOption;
} {
  const { title, legend, ...others } = option || {};

  const common = useChartCommon();

  return {
    title,
    legend,
    option: _.merge({ ...defaultOption }, { ...others, ...common }),
  };
}
